<template>
    <div class='WaterBall'>
        <IEcharts :option="WaterBallOption" style="width:340px;height:156px" v-if='WaterBallShow'></IEcharts>
    </div>
</template>

<script>
import IEcharts from "vue-echarts-v3";
import '../../node_modules/echarts-liquidfill/dist/echarts-liquidfill.js'
    export default {
        name:'WaterBall',
        data(){
            return{
                WaterBallOption:{
                    series: [{
                        type: 'liquidFill',
                        data: [0.9],
                        color: ['#68b7fe'],//渐变
                        center: ['50%', '50%'],
                        radius: '80%',
                        waveAnimation: true,
                        amplitude: '3%',
                        animationDuration: 300,
                        animationEasingUpdate: 300,
                        outline: {
                            show: true,
                            borderDistance: 1,
                            itemStyle: {
                                color: 'none',
                                borderColor: '#7e92f8',
                                borderWidth: 2,
                                shadowBlur: 0,
                            }
                        },
                        backgroundStyle: {
                            color: 'rgba(0, 0, 0, 0)',
                        },
                        label: {
                            show: true,
                            color: '#FF6F07',
                            fontSize: 18,
                            fontWeight: 'normal',
                        },
                    }]
                },
                WaterBallShow:false
            }
        },
        methods:{
            //如果100%水球图不加载波浪效果
            resetAmplitude() {
                if (this.ScoreRightEChart.series[0].data[0] === 1) {
                    this.ScoreRightEChart.series[0].amplitude = '0'
                } else {
                    this.ScoreRightEChart.series[0].amplitude = '2%'
                }
            },
        },
        components:{
            IEcharts,
        },
        props:{
            waterBallData:{
                type:Array
            },
            color:{
                type:Array
            },
            borderColor:{
                type:String
            }
        },
        mounted(){
            // this.WaterBallOption.series[0].data = this.waterBallData
            this.WaterBallOption.series[0].color = this.color
            this.WaterBallOption.series[0].outline.itemStyle.borderColor = this.borderColor
            // this.WaterBallOption.series[0].label.color = this.color[0]

        },
        watch:{
            'waterBallData':{
                handler(){
                    this.WaterBallOption.series[0].data = this.waterBallData
                    this.WaterBallShow = true
                },
                deep:true,
                immediate: true
            }
        }
    }
</script>

<style scoped>

</style>